import React, { useEffect, useState } from "react";
import { Dimensions, Image } from "react-native";
type Props = {
  uri: string;
};
const { width: SCREEN_WIDTH } = Dimensions.get("window");
const SHOW_WIDTH = (SCREEN_WIDTH - 18) >> 1;
// eslint-disable-next-line react/display-name
export default ({ uri }: Props) => {
  const [height, setHeight] = useState<number>(200);
  useEffect(() => {
    if (uri) {
      Image.getSize(uri, (width: number, height: number) => {
        const showHeight = (SHOW_WIDTH * height) / width;
        setHeight(showHeight);
      });
    }
  }, [uri]);
  return (
    <Image
      style={{
        width: (SCREEN_WIDTH - 18) >> 1,
        height: height,
        resizeMode: "cover",
      }}
      source={{ uri: uri }}
    />
  );
};
